<!--
 * @Description:选中文字弹出提示
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-22 22:35:20
 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>选中文字弹出提示</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		body {
			height: 2000px;
		}

		div {
			width: 400px;
			height: 400px;
			margin: 50px;
		}

		#demo {
			width: 100px;
			height: 100px;
			background-color: pink;
			position: absolute;
			top: 0;
			left: 0;
			display: none;
		}
	</style>
	<script>
		window.onload = function () {
			function $(id) {
				return document.getElementById(id);
			}
			$("test").onmouseup = function (event) { //抬起鼠标
				var event = event || window.event;
				var x = event.clientX;
				var y = event.clientY;
				var txt = "";
				if (window.getSelection) { //获取用户选中文字
					txt = window.getSelection().toString()
				} else { //ie
					txt = document.selection.createRange().text;
				}
				if (txt) {
					showBox(x, y, txt)
				}

			}

			document.onmousedown = function (event) { //按下鼠标
				var event = event || window.event;
				var targetId = event.target ? event.target.id : event.srcElement.id;
				if (targetId != "demo") { //不等于当前对象就隐藏
					$("demo").style.display = "none"
				}
			}

			function showBox(mousex, mousey, contentText) {
				let time = null
				clearTimeout(time)
				time = setTimeout(() => {
					$("demo").style.display = "block"
					$("demo").style.left = mousex + "px"
					$("demo").style.top = mousey + "px"
					$("demo").innerHTML = contentText
				}, 200)

			}




		}
	</script>
</head>

<body>
	<span id="demo"></span>
	<div id="test">Nuxt.js 十分简单易用。一个简单的项目只需将 nuxt 添加为依赖组件即可。<br>
		为了快速入门，Nuxt.js团队创建了脚手架工具 create-nuxt-app。<br>
		确保安装了npx（npx在NPM版本5.2.0默认安装了）：<br>
		如果不使用 Nuxt.js 提供的 starter 模板，<br>
		我们也可以从头开始新建一个 Nuxt.js 应用项目，<br>
		过程非常简单，只需要 1个文件和1个目录。如下所示：<br>
	</div>
	<div id="another">
		我不要的文字
		我不要的文字
		我不要的文字
		我不要的文字
		我不要的文字
		我不要的文字
		我不要的文字
		我不要的文字
	</div>
</body>

</html>